初学福音，手把手带你vue封装弹框组件并全局注册使用~

您所在的位置：网站首页 › vue 密码框组件 › 初学福音，手把手带你vue封装弹框组件并全局注册使用~

初学福音，手把手带你vue封装弹框组件并全局注册使用~

2023-10-03 12:22| 来源: 网络整理| 查看: 265

一.话不多，先上效果：

大家好呀，好久不见，最近还好吗？今天分享个vue封装弹框组件的内容，并全局注册它，虽然内容比较简单，但是刚入门vue的小伙伴可以友好的了解组件封装思想~ （最后有完整源码）

基本效果：

在这里插入图片描述

弹框里内容可以自定义内容放入标签等：

在这里插入图片描述

二.具体实现： 1.先确定弹框组件有什么功能： xxxx自定义内容

组件名就叫SpringFrame，可以自定义传个标题title的值；isShow是一个布尔值，控制弹框是否显示隐藏，一般用变量；cancel是点击确认触发的事件；confirm是点击取消触发的事件；

2.开始SpringFrame写组件：

新建一个vue文件，先接收props父传过来的参数：

export default { name: "SpringFrame", props: { title: { type: String, // 变量类型 default: "标题", //默认值 }, isShow: { type: Boolean, default: false, }, }, data() { return {}; }, }; 3.定义基本标签与样式：

标签：

{{ title }} 取消确认

css样式，比较简单就不详细说了：

.app { position: fixed; inset: 0; z-index: 10000; background-color: rgba(194, 194, 194, 0.2); } .card { position: absolute; top: 50%; left: 50%; min-width: 250px; transform: translate(-50%, -50%); box-shadow: 0 0 8px rgb(219, 219, 219); background-color: #fff; padding: 10px 15px; } .card > h2 { text-align: center; font-size: 20px; line-height: 25px; } .text { min-height: 100px; max-height: 70vh; max-width: 70vw; overflow: auto; } .btn > button { padding: 5px; margin-left: 5px; float: right; text-align: center; font-family: "fangsong"; font-weight: bold; font-size: 18px; border: none; color: rgb(114, 114, 114); background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1), white); box-shadow: -2px -2px 8px -2px white, 2px 2px 8px -2px rgba(0, 0, 0, 0.15); border-radius: 5px; cursor: pointer; } button:active { box-shadow: inset -2px -2px 8px -2px white, inset 2px 2px 8px -2px rgba(0, 0, 0, 0.15); }

inset: 0; 相当于 top、left、right、bottom：0，

4.定义事件： export default { name: "SpringFrame", props: { title: { type: String, default: "标题", }, isShow: { type: Boolean, default: false, }, }, data() { return {}; }, computed: {}, methods: { //点击确认时通过$emit传递事件过去 cancel() { this.$emit("cancel"); }, confirm() { //点击取消时通过$emit传递事件过去 this.$emit("confirm"); }, //点击空白区域相当于点击取消事件 blank(e) { /* 看点击的节点是不是最外层 */ if (e.target.className == "app") { this.cancel(); } }, }, };

以上组件就定义好啦~

5.全局注册该组件：

在SpringFrame.vue文件同级下新建一个index.js文件，内容如下：

// 导入组件 import SpringFrame from './SpringFrame.vue'; // 放数组里，以后有多个组件可以方便点 const arr = [SpringFrame] const assembly = { // vue提供install可供我们开发新的插件及全局注册组件等 //install方法第一个参数是vue的构造器，第二个参数是可选的选项对象 install(Vue){ arr.forEach((item)=>{ // 注册组件 Vue.component(item.name,item) }) } }; // 记得导出 export default assembly;

在main.js文件里使用：这个路径你们看你们index的文件放那，我放components目录下：

import assembly from './components/index' Vue.use(assembly) 5.使用该组件：

我就在App.vue里使用：

弹框北极光之夜。 export default { data() { return { show: false, }; }, methods: { tan() { console.log(this.show); this.show = true; }, confirm() { this.show = false; }, cancel() { this.show = false; }, }, };

效果就跟上面一样

6.完整代码：

组件的完整代码：

{{ title }} 取消确认 export default { name: "SpringFrame", props: { title: { type: String, default: "标题", }, isShow: { type: Boolean, default: false, }, }, data() { return {}; }, computed: {}, methods: { //点击确认时通过$emit传递事件过去 cancel() { this.$emit("cancel"); }, confirm() { //点击取消时通过$emit传递事件过去 this.$emit("confirm"); }, //点击空白区域相当于点击取消事件 blank(e) { /* 看点击的节点是不是最外层 */ if (e.target.className == "app") { this.cancel(); } }, }, watch: {}, created() {}, mounted() {}, }; .app { position: fixed; inset: 0; z-index: 10000; background-color: rgba(194, 194, 194, 0.2); } .card { position: absolute; top: 50%; left: 50%; min-width: 250px; transform: translate(-50%, -50%); box-shadow: 0 0 8px rgb(219, 219, 219); background-color: #fff; padding: 10px 15px; } .card > h2 { text-align: center; font-size: 20px; line-height: 25px; } .text { min-height: 100px; max-height: 70vh; max-width: 70vw; overflow: auto; } .btn > button { padding: 5px; margin-left: 5px; float: right; text-align: center; font-family: "fangsong"; font-weight: bold; font-size: 18px; border: none; color: rgb(114, 114, 114); background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1), white); box-shadow: -2px -2px 8px -2px white, 2px 2px 8px -2px rgba(0, 0, 0, 0.15); border-radius: 5px; cursor: pointer; } button:active { box-shadow: inset -2px -2px 8px -2px white, inset 2px 2px 8px -2px rgba(0, 0, 0, 0.15); } 三.总结：

上面就是全部内容啦，是比较简单的，有不明白的可以评论区留言哈~

下次见啦~

在这里插入图片描述

我的哔哩哔哩空间 Gitee仓库地址：全部特效源码 Q群聊（欢迎）：629596039 其它文章： ~关注我看更多简单创意特效：文字烟雾效果 html+css+js 环绕倒影加载特效 html+css 气泡浮动背景特效 html+css 简约时钟特效 html+css+js 赛博朋克风格按钮 html+css 仿网易云官网轮播图 html+css+js 水波加载动画 html+css 导航栏滚动渐变效果 html+css+js 书本翻页 html+css 3D立体相册 html+css 霓虹灯绘画板效果 html+css+js 记一些css属性总结（一） Sass总结笔记 …等等进我主页看更多~

【本文地址】

初学福音，手把手带你vue封装弹框组件并全局注册使用~

初学福音，手把手带你vue封装弹框组件并全局注册使用~

今日新闻

推荐新闻